﻿<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="generator" content="Jekyll v3.6.0">
  <title>友好访问 &middot; BootstrapVue</title>
  <!-- Bootstrap 核心CSS -->
  <link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- 本文档额外专用css -->
  <link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
  <link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
  <link href="../../style/bv_path.css" rel="stylesheet">

  <!-- Favicons图标定义 -->
  <link data-n-head="ssr" rel="manifest" href="../../manifest.json">
  <link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
  <link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

  <!-- Meta关键字定义 -->
  <meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>

<body>
  <a id="skippy" class="sr-only sr-only-focusable" href="#content">
    <div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
  </a>
  <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a
      class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg"
        focusable="false">
        <title>Bootstrap</title>
        <path fill="currentColor"
          d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z" />
        <path fill="currentColor"
          d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z" />
      </svg>
    </a>
    <div class="navbar-nav-scroll">
      <ul class="navbar-nav bd-navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
        <li class="nav-item"><a class="nav-link " href="index.html">中文手册</a></li>
        <li class="nav-item"><a class="nav-link " href="../components">组件</a></li>
        <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
        <li class="nav-item"><a class="nav-link active" href="../reference">参考</a></li>
        <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
        <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
        <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
        <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
      </ul>
    </div>
    <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
      <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
          <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
          <a class="dropdown-item" href="/Boot/">v3.3.7</a>
          <a class="dropdown-item" href="/Sass/">Sass语言</a>
          <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
          <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
          <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
          <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
          <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
          <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
          <a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
        </div>
      </li>
      <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation"
          target="_blank" rel="noopener" aria-label="GitHub">
          <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
            <title>GitHub</title>
            <path
              d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"
              fill="currentColor" fill-rule="evenodd" />
          </svg>
        </a> </li>
      <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank"
          rel="noopener" aria-label="Slack">译者说</a></li>
    </ul>
    <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a>
  </header>

  <div class="container-fluid">
    <div class="row flex-xl-nowrap">
      <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
        <form class="bd-search d-flex align-items-center">
          <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..."
            autocomplete="off">
          <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse"
            data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false"
            aria-label="Toggle docs navigation">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
              <title>Menu</title>
              <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10"
                d="M4 7h22M4 15h22M4 23h22" />
            </svg>
          </button>
        </form>


        <nav class="collapse bd-links" id="bd-docs-nav">
          <div class=""><a href="../" class="bd-toc-link">首页</a></div>
          <div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  ">
              起步 </a>
            <ul class="nav bd-sidenav">
            </ul>
          </div>
          <div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/components/"
              class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
            <ul class="nav bd-sidenav">
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link">
                  警告提示框(Alert) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link">
                  徽章(Badge) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link">
                  面包屑导航(Breadcrumb) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link">
                  按钮(Button) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link">
                  按钮组(Button Group) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html"
                  class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link">
                  日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card)
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link">
                  轮播效果(Carousel) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link">
                  折叠面板(Collapse) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link">
                  下拉菜单(Dropdown) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link">
                  嵌入(Embed) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form)
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link">
                  表单复选框(Form Checkbox) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html"
                  class="nav-link"> 表单时间选择器(Form Datepicker) <small
                    class="badge text-uppercase badge-success">New</small> </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link">
                  文件选择(Form File) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link">
                  表单组合(Form Group) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link">
                  表单输入框(Form Input) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link">
                  单选择表单Form Radio </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link">
                  下拉式表单(Form Select) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html"
                  class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small>
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link">
                  Tags表单选择器(Form Tags) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link">
                  文本框(Form Textarea) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html"
                  class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link">
                  图片(Image) </a></li>

              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link">
                  输入框(Input Group) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link">
                  Hero大块屏(Jumbotron) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link">
                  布局与网络Layout and Grid System </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link">
                  链接(Link)</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link">
                  列表组(List group) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link">
                  媒体(Media) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link">
                  弹出模态框(Modal) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav)
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link">
                  导航栏(Navbar) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link">
                  分页(Pagination) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html"
                  class="nav-link"> 分页导航(Pagination Nav) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link">
                  指示备注(Popover) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link">
                  进度指示器(Progress) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link">
                  旋转指示器(Spinner) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link">
                  表格(Table) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link">
                  选项卡(Tabs) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link">
                  时间组件(Time) </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link">
                  冒泡推送(Toasts) </a></li>
              <li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/tooltip.html"
                  class="nav-link"> tip提示组件(Tooltip) </a></li>
            </ul>
          </div>
          <div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
            <ul class="nav bd-sidenav">
              <li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link">
                  指令目录 </a></li>
              <li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link">
                  Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link">
                  Popover 提示备注</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link">
                  Scrollspy 滚动监听</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link">
                  Tooltip 提示指令</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link">
                  Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
            </ul>
          </div>
          <div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
            <ul class="nav bd-sidenav">
            </ul>
          </div>

          <div class="bd-toc-item active"> <a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考 </a>
            <ul class="nav bd-sidenav">
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link"> 参考目录 </a></li>
              <li class="nav-item active"><a href="../../../bootstrap-vue/docs/reference/accessibility.html"
                  class="nav-link">友好访问</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html"
                  class="nav-link">Color颜色变量 </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link">
                  组件图像img的src路径解析</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link">
                  Router路由支持 </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html"
                  class="nav-link">大小规格</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html"
                  class="nav-link">间距处理</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html"
                  class="nav-link">开始模板</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html"
                  class="nav-link">主题色彩</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html"
                  class="nav-link">通用Class类</a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html"
                  class="nav-link">Form表单验证</a></li>
            </ul>
          </div>
          <div class="bd-toc-item"> <a class="bd-toc-link" href="../components/alerts.html"> 杂项 </a>
            <ul class="nav bd-sidenav">
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/misc/changelog.html" class="nav-link"> Changelog
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/misc/contributing.html" class="nav-link">
                  Contributing </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/misc/settings.html" class="nav-link"> Settings
                </a></li>
              <li class="nav-item"><a href="../../../bootstrap-vue/docs/misc/third-party.html" class="nav-link"> Third
                  party libraries </a></li>
            </ul>
          </div>
          <div class=""><a href="/play" class="bd-toc-link">在线模拟器</a></div>
        </nav>
      </div>

      <div class="d-none d-xl-block col-xl-2 bd-toc">
        <ul class="section-nav">
          <li class="nav-item toc-entry mb-2"><a target="_self" href="#accessibility"
              class="nav-link font-weight-bold"><span>友好访问 Accessibility</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#overview-and-limitations"
              class="nav-link"><span>概述和限制</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#structural-markup"
              class="nav-link"><span>结构标记</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#interactive-components"
              class="nav-link"><span>交互式组件</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#color-contrast"
              class="nav-link"><span>颜色对比度</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#visually-hidden-content"
              class="nav-link"><span>可视隐藏内容</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#reduced-motion"
              class="nav-link"><span>减少移动</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self"
              href="#testing-your-application-for-accessibility" class="nav-link"><span>测试应用程序的可访问性</span></a></li>
          <li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#additional-resources"
              class="nav-link"><span>额外资源</span></a></li>
        </ul>
      </div>

      <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

        <nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
          <ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active"
                target="_self">首页</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs"
                class="nuxt-link-active" target="_self">中文手册</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea=""
                href="../../../bootstrap-vue/docs/reference/" class="nuxt-link-active" target="_self">参考</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea=""
                aria-current="location">友好访问</span></li>
          </ol>
        </nav>
        <div class="clearfix d-block"></div>
        <h1 class="bd-title" id="content">友好访问 Accessibility</h1>
        <p class="bd-lead">介绍 BootstrapVue在web访问友好性支持以及相关参数。</p>
        <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>




        <nav class="bd-quick-links mb-3 d-xl-none" style="" data-v-4abf2740="">
          <header data-v-4abf2740="">
            <button data-v-4abf2740="" type="button"
              class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed"
              aria-controls="bd-quick-links-collapse" aria-expanded="false"> Show page table of contents </button>
          </header>
          <ul data-v-4abf2740="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#overview-and-limitations" class=""><span
                  data-v-4abf2740="">Overview and Limitations</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#structural-markup" class=""><span
                  data-v-4abf2740="">Structural markup</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#interactive-components" class=""><span
                  data-v-4abf2740="">Interactive components</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#color-contrast" class=""><span
                  data-v-4abf2740="">Color contrast</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#visually-hidden-content" class=""><span
                  data-v-4abf2740="">Visually hidden content</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#reduced-motion" class=""><span
                  data-v-4abf2740="">Reduced motion</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self"
                href="#testing-your-application-for-accessibility" class=""><span data-v-4abf2740="">Testing your
                  application for accessibility</span></a></li>
            <li data-v-4abf2740=""><a data-v-4abf2740="" target="_self" href="#additional-resources" class=""><span
                  data-v-4abf2740="">Additional resources</span></a></li>
          </ul>
        </nav>
        <h2 id="overview-and-limitations" class="bv-no-focus-ring"><span class="bd-content-title">概述和限制<a
              class="anchorjs-link" href="#overview-and-limitations"
              aria-labelledby="overview-and-limitations"></a></span></h2>
        <p>
          BootstrapVue将自动为大多数交互式组件添加适当的辅助功能标记。但是，使用Bootstrap和BootstrapVue构建的任何项目的总体可访问性在很大程度上取决于作者的标记、附加样式和脚本。
          但是，如果这些已经正确实现，那么应该完全有可能使用BootstrapVue创建满足<a href="https://www.w3.org/TR/WCAG20/" target="_blank"
            rel="noopener"> <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.0</a>
          （A/AA/AAA）、<a href="https://www.section508.gov/" target="_blank" rel="noopener">Section
            508</a>和类似的可访问性标准和要求的网站和应用程序。
        </p>
        <h2 id="structural-markup" class="bv-no-focus-ring"><span class="bd-content-title">结构标记<a class="anchorjs-link"
              href="#structural-markup" aria-labelledby="structural-markup"></a></span></h2>
        <p>BootstrapVue的自定义组件已经针对可访问/语义生成的即时HTML标记进行了优化。本文档旨在为开发人员提供最佳实践示例，以演示引导程序本身的使用，并演示适当的语义标记，包括解决潜在可访问性问题的方法。</p>
        <p>大多数组件文档页面都包含一个（或多个）可访问性部分，指出了最佳实践和限制。</p>
        <h2 id="interactive-components" class="bv-no-focus-ring"><span class="bd-content-title">交互式组件<a
              class="anchorjs-link" href="#interactive-components" aria-labelledby="interactive-components"></a></span>
        </h2>
        <p>
          BootstrapVue的交互组件（如模式对话框、下拉菜单和自定义工具提示）设计用于触摸、鼠标和键盘用户。通过使用相关的<a
            href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank" rel="noopener">
            <abbr title="Web Accessibility Initiative">WAI</abbr>-<abbr
              title="Accessible Rich Internet Applications">ARIA</abbr> </a> 角色和属性，这些组件也应该可以使用辅助技术（如屏幕阅读器）理解和操作。
        </p>
        <p>
          由于BootstrapVue的组件被故意设计成相当通用的，因此作者可能需要包含更多的<abbr
            title="Accessible Rich Internet Applications">ARIA</abbr>角色和属性，以及JavaScript行为，以便更准确地传达其组件的精确性质和功能。这通常会在文档中注明。
        </p>
        <h2 id="color-contrast" class="bv-no-focus-ring"><span class="bd-content-title">颜色对比度<a class="anchorjs-link"
              href="#color-contrast" aria-labelledby="color-contrast"></a></span></h2>
        <p>
          当前构成Bootstrap V4默认调色板的大多数颜色（在整个框架中用于按钮变化，警报变化，表单验证指示符）在使用时会导致颜色对比度不足
          （低于建议的<a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" target="_blank"
            rel="noopener">WCAG 2.0 color contrast ratio of 4.5:1</a>） 在明亮的背景下。 作者将需要手动修改/扩展这些默认颜色，以确保足够的颜色对比度。
        </p>
        <p>
          请参阅<a href="/docs/reference/theming" class="font-weight-bold">主题</a>部分以自定义Bootstrap的SCSS。
        </p>
        <h2 id="visually-hidden-content" class="bv-no-focus-ring"><span class="bd-content-title">可视隐藏内容<a
              class="anchorjs-link" href="#visually-hidden-content"
              aria-labelledby="visually-hidden-content"></a></span></h2>
        <p>
          可以使用<code class="text-nowrap" translate="no">.sr-only</code>类设置应在视觉上隐藏但仍可供诸如屏幕阅读器之类的辅助技术访问的内容。
          这在需要将其他视觉信息或提示（例如通过使用颜色表示的含义）也需要传达给非视觉用户的情况下很有用。
        </p>
        <div class="bd-code">
          <pre class="hljs html p-2" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-danger"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only"</span>&gt;</span>Danger: <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  This action is not reversible
<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></pre>
        </div>
        <p>
          对于视觉上隐藏的交互式控件，例如传统的“跳过”链接，可以将<code class="text-nowrap" translate="no">.sr-only</code>类
          与.<code class="text-nowrap" translate="no">.sr-only-focusable</code>类结合使用。 这样可以确保控件一旦聚焦（对于有视力的键盘用户）就变得可见。
        </p>
        <div class="bd-code">
          <pre class="hljs html p-2"
            translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"sr-only sr-only-focusable"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#content"</span>&gt;</span>Skip to main content<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></pre>
        </div>
        <h2 id="reduced-motion" class="bv-no-focus-ring"><span class="bd-content-title">减少移动<a class="anchorjs-link"
              href="#reduced-motion" aria-labelledby="reduced-motion"></a></span></h2>
        <p>
          Bootstrap包括对<a href="https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion" target="_blank"
            rel="noopener"><code class="text-nowrap" translate="no">prefers-reduced-motion</code> media feature</a>
          媒体功能的支持。 在允许用户指定减少移动偏好的浏览器/环境中，Bootstrap中的大多数CSS过渡效果（例如，当打开或关闭模式对话框时或旋转木马中的滑动动画时）都将被禁用。
        </p>
        <p>如果希望动画和/或过渡效果正常，而动画和/或过渡效果却无效，那么您可以在操作系统控制面板中启用“减少移动（无动画）”设置。</p>
        <h2 id="testing-your-application-for-accessibility" class="bv-no-focus-ring"><span
            class="bd-content-title">测试应用程序的可访问性<a class="anchorjs-link"
              href="#testing-your-application-for-accessibility"
              aria-labelledby="testing-your-application-for-accessibility"></a></span></h2>
        <p>
          强烈建议在部署前测试应用程序的可访问性。请注意，有些国家甚至有法律<a href="https://webaim.org/articles/laws/world/" target="_blank"
            rel="noopener">要求所有网站都可以访问</a>。
        </p>
        <p>使您的Web应用程序可访问时，只有两件事要考虑：</p>
        <ul>
          <li>定义正确的键盘行为。 BootstrapVue为我们的大多数组件提供键盘控制，但是您应确保自定义组件也可以通过键盘访问。</li>
          <li>
            屏幕阅读器可以理解您的应用。 在大多数情况下，Bootstrap将自动在我们的组件上设置正确的<code class="text-nowrap" translate="no">role</code>和<code
              class="text-nowrap" translate="no">aria-*</code> 属性。 您还应该确保所有自定义组件都提供正确的角色和属性（在可能的情况下使用语义HTML元素和标记）。
          </li>
        </ul>
        <p>您应该执行的测试步骤：</p>
        <ul>
          <li>
            尝试仅使用键盘来查看是否可以访问和控制所有交互式组件。 确保控件具有焦点样式，以便用户知道它们位于哪个交互式元素上。 请记住，键盘用户不能触发元素的<code class="text-nowrap"
              translate="no">hover</code>状态。
          </li>
          <li>使用屏幕阅读器（仅与键盘结合使用）浏览和与您的应用进行交互。 有几种免费的屏幕阅读器，可用于各种操作系统和浏览器。 请记住，屏幕阅读器用户只能“看到”他们听到的内容。</li>
          <li>在增加浏览器的缩放级别（和/或字体大小）时，查看应用的外观和工作方式。</li>
        </ul>
        <h2 id="additional-resources" class="bv-no-focus-ring"><span class="bd-content-title">额外资源<a
              class="anchorjs-link" href="#additional-resources" aria-labelledby="additional-resources"></a></span></h2>
        <ul>
          <li><a href="https://getbootstrap.com/docs/4.4/getting-started/accessibility/" target="_blank"
              rel="noopener">Bootstrap v4 Accessibility Documentation</a></li>
          <li><a href="https://www.w3.org/TR/WCAG20/" target="_blank" rel="noopener">Web Content Accessibility
              Guidelines (WCAG) 2.0</a></li>
          <li><a href="https://a11yproject.com/" target="_blank" rel="noopener">The A11Y Project</a></li>
          <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility" target="_blank" rel="noopener">MDN
              accessibility documentation</a></li>
          <li><a href="https://tenon.io/" target="_blank" rel="noopener">Tenon.io Accessibility Checker</a></li>
          <li><a href="https://developer.paciellogroup.com/resources/contrastanalyser/" target="_blank"
              rel="noopener">Colour Contrast Analyser (CCA)</a></li>
          <li><a href="https://github.com/squizlabs/HTML_CodeSniffer" target="_blank" rel="noopener">"HTML CodeSniffer"
              bookmarklet for identifying accessibility issues</a></li>
        </ul>







      </main>
    </div>
  </div>


  <script src="../../../js/jquery-3.2.1.slim.min.js"></script>
  <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
  <script src="../../../v4/dist/js/popper.min.js"></script>
  <script src="../../../v4/dist/js/bootstrap.min.js"></script>
  <script src="../../../v4/assets/js/docs.min.js"></script>
  <script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script>
  <script src="../../../v4/assets/js/docsearch.min.js"></script>
  <script>
    docsearch({
      appId: 'PRR89ISST8',
      apiKey: '95044d57d4d7bb744f322d1f18ed607f',
      indexName: 'z01-bootstrapV4',
      inputSelector: '#search-input',
      handleSelected: function (input, event, suggestion) {
        var url = suggestion.url;
        url = suggestion.isLvl1 ? url.split('#')[0] : url;
        // If it's a title we remove the anchor so it does not jump.
        window.location.href = url;
      },
      transformData: function (hits) {
        return hits.map(function (hit) {
          hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
          return hit;
        });
      },
      debug: false // Set debug to true if you want to inspect the dropdown
    });
  </script>
  <script>
    Holder.addTheme('gray', {
      bg: '#777',
      fg: 'rgba(255,255,255,.75)',
      font: 'Helvetica',
      fontweight: 'normal'
    });
  </script>
</body>

</html>